<html>
  <head>
    <title></title>
    <style>

      body { flow:horizontal; border-spacing:1em;}

      section.filled > div { 
        fill:#000;
        background-repeat: no-repeat;
        background-position: 0 50%;        
        background-size: 7dip 7dip;
        padding-left: 10dip;
      }
      
      section.hollow > div { 
        stroke:#000; stroke-width: 1dip;
        fill:transparent;
        background-repeat: no-repeat;
        background-position: 0 50%;        
        background-size: 7dip 7dip;
        padding-left: 10dip;
      }

      section.filled.stroked > div { 
        stroke:#f00; stroke-width: 2dip;
        fill:gold;
      }

      
      section.large > div { 
        background-size: 14dip 14dip;
        padding-left: 18dip;
      }
      
      
      
      
    </style>
    <script type="text/tiscript"></script>
  </head>
<body>
  <div>
    <h3>stock "images"</h3>
    <p>They are drawn using:</p>
    <p><code>stroke</code>,<code>stroke-width</code> and <code>fill</code><br>CSS properties.</p>
  </div>


  <section.filled>
    <h3>Filled</h3>
    <div style="background-image:url(stock:arrow-left)">stock:arrow-left</div>
    <div style="background-image:url(stock:arrow-right)">stock:arrow-right</div>
    <div style="background-image:url(stock:arrow-up)">stock:arrow-up</div>
    <div style="background-image:url(stock:arrow-down)">stock:arrow-down</div>
    <div style="background-image:url(stock:arrow-ne)">stock:arrow-ne</div>
    <div style="background-image:url(stock:arrow-se)">stock:arrow-se</div>
    <div style="background-image:url(stock:arrow-sw)">stock:arrow-sw</div>
    <div style="background-image:url(stock:arrow-nw)">stock:arrow-nw</div>
    <div style="background-image:url(stock:arrow-n)">stock:arrow-n</div>
    <div style="background-image:url(stock:arrow-s)">stock:arrow-s</div>
    <div style="background-image:url(stock:arrow-e)">stock:arrow-e</div>
    <div style="background-image:url(stock:arrow-w)">stock:arrow-w</div>
    <div style="background-image:url(stock:checkmark)">stock:checkmark</div>
    <div style="background-image:url(stock:cross-x)">stock:cross-x</div>
    <div style="background-image:url(stock:disk)">stock:disk</div>
    <div style="background-image:url(stock:block)">stock:block</div>
  </section>
  <section.hollow>
    <h3>Hollow</h3>
    <div style="background-image:url(stock:arrow-left)">stock:arrow-left</div>
    <div style="background-image:url(stock:arrow-right)">stock:arrow-right</div>
    <div style="background-image:url(stock:arrow-up)">stock:arrow-up</div>
    <div style="background-image:url(stock:arrow-down)">stock:arrow-down</div>
    <div style="background-image:url(stock:arrow-ne)">stock:arrow-ne</div>
    <div style="background-image:url(stock:arrow-se)">stock:arrow-se</div>
    <div style="background-image:url(stock:arrow-sw)">stock:arrow-sw</div>
    <div style="background-image:url(stock:arrow-nw)">stock:arrow-nw</div>
    <div style="background-image:url(stock:arrow-n)">stock:arrow-n</div>
    <div style="background-image:url(stock:arrow-s)">stock:arrow-s</div>
    <div style="background-image:url(stock:arrow-e)">stock:arrow-e</div>
    <div style="background-image:url(stock:arrow-w)">stock:arrow-w</div>
    <div style="background-image:url(stock:checkmark)">stock:checkmark</div>
    <div style="background-image:url(stock:cross-x)">stock:cross-x</div>
    <div style="background-image:url(stock:disk)">stock:disk</div>
    <div style="background-image:url(stock:block)">stock:block</div>    
  </section>
  <section.filled.large>
    <h3>Filled, larger</h3>
    <div style="background-image:url(stock:arrow-left)">stock:arrow-left</div>
    <div style="background-image:url(stock:arrow-right)">stock:arrow-right</div>
    <div style="background-image:url(stock:arrow-up)">stock:arrow-up</div>
    <div style="background-image:url(stock:arrow-down)">stock:arrow-down</div>
    <div style="background-image:url(stock:arrow-ne)">stock:arrow-ne</div>
    <div style="background-image:url(stock:arrow-se)">stock:arrow-se</div>
    <div style="background-image:url(stock:arrow-sw)">stock:arrow-sw</div>
    <div style="background-image:url(stock:arrow-nw)">stock:arrow-nw</div>
    <div style="background-image:url(stock:arrow-n)">stock:arrow-n</div>
    <div style="background-image:url(stock:arrow-s)">stock:arrow-s</div>
    <div style="background-image:url(stock:arrow-e)">stock:arrow-e</div>
    <div style="background-image:url(stock:arrow-w)">stock:arrow-w</div>
    <div style="background-image:url(stock:checkmark)">stock:checkmark</div>
    <div style="background-image:url(stock:cross-x)">stock:cross-x</div>
    <div style="background-image:url(stock:disk)">stock:disk</div>
    <div style="background-image:url(stock:block)">stock:block</div>
  </section>
  <section.filled.stroked.large>
    <h3>Filled, larger</h3>
    <div style="background-image:url(stock:arrow-left)">stock:arrow-left</div>
    <div style="background-image:url(stock:arrow-right)">stock:arrow-right</div>
    <div style="background-image:url(stock:arrow-up)">stock:arrow-up</div>
    <div style="background-image:url(stock:arrow-down)">stock:arrow-down</div>
    <div style="background-image:url(stock:arrow-ne)">stock:arrow-ne</div>
    <div style="background-image:url(stock:arrow-se)">stock:arrow-se</div>
    <div style="background-image:url(stock:arrow-sw)">stock:arrow-sw</div>
    <div style="background-image:url(stock:arrow-nw)">stock:arrow-nw</div>
    <div style="background-image:url(stock:arrow-n)">stock:arrow-n</div>
    <div style="background-image:url(stock:arrow-s)">stock:arrow-s</div>
    <div style="background-image:url(stock:arrow-e)">stock:arrow-e</div>
    <div style="background-image:url(stock:arrow-w)">stock:arrow-w</div>
    <div style="background-image:url(stock:checkmark)">stock:checkmark</div>
    <div style="background-image:url(stock:cross-x)">stock:cross-x</div>
    <div style="background-image:url(stock:disk)">stock:disk</div>
    <div style="background-image:url(stock:block)">stock:block</div>
  </section>
</body>
</html>
